<body>
    <div>
        <style>
            p{
                background-color: blue;
            }
        </style>
        <p>普通的dom节点</p>
    </div>
    <div id="container"></div>
</body>
<script>
    const container = document.querySelector('#container'); // shadow host
    const shadowOpen = container.attachShadow({ mode: 'open' })

    // mode 为 open 时, 可以使用shadowRoot获取到影子节点
    // mode 为 closed 时, 不可以获取到影子节点

    for (let index = 0; index < 3; index++) {
        const p = document.createElement('p')
        p.innerHTML = `<style>p{font-size:18px;background-color:red}</style>shadow dom 中第${index}个p标签`
        shadowOpen.appendChild(p)
    }
</script>